<script setup lang="ts">
//无限滚动框
const list = defineModel('modelValue');
const loading = defineModel('loading');

const props = defineProps({
  scroll: {
    type: Function,
    default: null
  },
  scrollDistance: {
    type: Number,
    default: 20
  }
})
const emits = defineEmits(["scroll"]);

onMounted(() => {
  addWinListen();
})

function addWinListen() {
  // 滚动事件监听
  window.addEventListener('scroll', () => {
    // 判断是否滚动到底部
    if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - props.scrollDistance)) {
      loadMore();
    }
  });
}

async function loadMore() {
  await emits("scroll");
}

</script>

<template>
  <div class="scroll-box">
    <slot name="default"></slot>
    <div class="loading-box" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0)">
    </div>
  </div>
</template>

<style scoped lang="scss">
//继承父节点
.scroll-box {
  display: inherit;
  justify-content: inherit;
  flex-wrap: inherit;
  width: inherit;

  .loading-box {
    text-align: center;
    width: inherit;
    height: 10rem;
  }
}
</style>